<template>
  <div>
    <Tabs>
      <TabPane label="基本信息">
        <div class="form-content">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="95">
            <!--       <FormItem label="应用名称" prop="appName">
                     <Input v-model="formValidate.appName" placeholder="请输入应用名称"></Input>
                   </FormItem>
                   <FormItem label="创建日期">
                     {{formValidate.createDate}}
                   </FormItem>
                   <FormItem label="激活状态">
                     <RadioGroup v-model="status1">
                       <Radio label="ACTIVE"><span>激活</span></Radio>
                       <Radio label="UNACTIVE"><span>冻结</span></Radio>
                     </RadioGroup>
                   </FormItem>-->
            <FormItem label="异步通知地址" prop="notifyUrl">
              <Input v-model="formValidate.notifyUrl" placeholder="请输入异步通知地址(以http或https开头)"></Input>
            </FormItem>
            <FormItem label="同步通知地址" prop="resultUrl">
              <Input v-model="formValidate.resultUrl" placeholder="请输入同步通知地址(以http或https开头)"></Input>
            </FormItem>
            <!--       <FormItem label="AppId" prop="appId">
                     <Input v-model="formValidate.appId" disabled/>
                   </FormItem>-->
            <FormItem>
              <Button type="primary" style="width: 40%" @click="handleSubmit('formValidate')">保存</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left:16px;width: 40%">重置
              </Button>
            </FormItem>
          </Form>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import Model from '@/models/apps'
  import time from '@/utils/helpers/timeLite'
  import storage from '@/utils/helpers/storageLite'

  export default {
    name: 'baseInfo',
    data () {
      const validateURL = (rule, value, callback) => {
        if (value === '') {
          callback()
        } else if (!(/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~/])+$/.test(value))) {
          callback(new Error('网页格式不正确,必须得以http或https开头'))
        } else {
          callback()
        }
      }
      return {
        formValidate: {
          appName: '',
          createDate: '',
          appId: this.$route.params.id,
          notifyUrl: '',
          resultUrl: ''
        },
        status1: '',
        ruleValidate: {
          notifyUrl: [
            {validator: validateURL, trigger: 'blur'}
          ],
          resultUrl: [
            {validator: validateURL, trigger: 'blur'}
          ]
        }
      }
    },
    computed: mapState({
        'allApps': state => state.allApps,
        getCurrentApp (state) {
          return state.allApps.currentApp
        }
      },
    ),
    watch: {
      getCurrentApp (val) {
        this.getBaseInfo(val)
      }
    },
    created () {
      this.getBaseInfo(this.$route.params.id)
    },
    methods: {
      getBaseInfo (id) {
        new Model('app/' + id)
          .GET()
          .then((res) => {
            this.formValidate.appName = res.data.data.productName
            this.formValidate.createDate = time.getDateTime(res.data.data.createTime)
            this.formValidate.appId = res.data.data.id
            this.formValidate.resultUrl = res.data.data.resultUrl
            this.formValidate.notifyUrl = res.data.data.notifyUrl
            this.status1 = res.data.data.status
          })
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            new Model('app/' + (this.allApps.currentApp === null ? this.$route.params.id : this.allApps.currentApp))
              .PUT({
                params: {
                  productName: this.formValidate.appName,
                  status: this.status1,
                  resultUrl: this.formValidate.resultUrl,
                  notifyUrl: this.formValidate.notifyUrl
                }
              })
              .then((res) => {
                if (res.data.errorCode === '2') {
                  this.$Message.info('保存异常')
                  return
                }
                this.$Message.success('提交成功!')
                this.get()
              })
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields()
      },
      get () {
        this.$store.dispatch('getAllApps', {
          params: {
            userNo: storage.get('userNo')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .form-content {
    margin-top: 30px;
    width: 400px;
    margin-left: 80px;
  }
</style>
